<template>
  <E-box-containers title="独家放送" :loading="load">
    <span class="box-right" slot="box-right">
      更多
      <i class="el-icon-arrow-right" />
    </span>
    <div class="E-reco-exclusive">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item, index) in dataArr.slice(0,3)" :key="index">
          <div class="box-item">
            <div class="box-content bg-image-cover" v-lazy:background-image="item.sPicUrl"></div>
            <p class="box-title">
              <span>{{item.name}}</span>
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
  </E-box-containers>
</template>

<script>
export default {
  components: {
    EBoxContainers: () => import('./E-box-containers')
  },
  mounted() {
    this.getData();
  },
  data() {
    return {
      load: true,
      dataArr: []
    };
  },
  methods: {
    getData() {
      this.$api.get('reco_privatecontent').then(({ result = [] }) => {
        this.dataArr = result;
      }).finally(() => { this.load = false; });
    }
  }
};
</script>

<style lang="scss" scoped>
.E-reco-exclusive {
  @import "@/plug-in/_base.scss";
  .box-item {
    cursor: default;
    & > .box-content {
      width: 100%;
      height: 151.5px;
      margin-bottom: 5px;
      overflow: hidden;
      cursor: pointer;
    }
    & > .box-title {
      line-height: 16px;
      height: 16px;
      overflow: hidden;
      @include row-dot-show(1);
      & > span {
        cursor: pointer;
        color: #444;
        &:hover {
          color: #000;
        }
      }
    }
  }
}
</style>
